<!--督导评教-->
<template>
    <div class="assessment-container">
     <div class="search-container">
      <div class="search-container-left">
        <div class="search-container-item">
          <span>学期：</span>
          <el-select
            v-model="xq"
            style="width: 90px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in xqList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>年级：</span>
          <el-select
            v-model="pycc"
            style="width: 88px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in pyccList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>培养层次：</span>
          <el-select
            v-model="xxlx"
            style="width: 88px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in xxlxList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
         <div class="search-container-item">
          <span>修习类型：</span>
          <el-select
            v-model="xl"
            style="width: 88px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in xlList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>队别：</span>
          <el-select
            v-model="db"
            style="width: 88px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in dbList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>专业班次：</span>
          <el-input
            style="width: 152px"
            size="mini"
            placeholder="请输入内容"
            v-model="v1"
          ></el-input>
        </div>
        <div class="search-button">
          <img src="../../../assets/assessment/icon-search.png" alt="" />
          <span>查询</span>
        </div>
      </div>
     </div>
     <div class="search-container-center"> <span>2020英语专业班次成绩单</span></div>
     <div class="table-container">
      <el-table
          :data="tableData"
          border
          class="table-data"
          row-class-name="row-class"
          cell-class-name="cell-class"
          header-row-class-name="header-row-class"
          header-cell-class-name="header-cell-class"
      >
        <el-table-column
            prop="btname"
            label="2020秋学期"
            align="center"
        >
     
        <el-table-column prop="date" label="学号" align="center">
        </el-table-column>
        <el-table-column prop="xq" label="学员姓名"  align="center">
        </el-table-column>
        <el-table-column
            prop="zxddks"
            label="火燎原俱乐部*"

            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="rctkks"
            label="基础英语1"

            align="center"
        >
        </el-table-column>
        <el-table-column prop="zks" label="大学语文*"  align="center">
        </el-table-column>
        <el-table-column
            prop="tkzcs"
            label="数学思想方法"

            align="center"
        >
        </el-table-column>
        <el-table-column prop="y" label="计算机等级培训俱乐部*"  align="center">
        </el-table-column>
        <el-table-column
            prop="yProportion"
            label="数据处理与分析"

            align="center"
        >
        </el-table-column>
        <el-table-column prop="l" label="数学思想方法*"  align="center">
        </el-table-column>
        <el-table-column
            prop="lProportion"
            label="平均学分绩点"

            align="center"
        >
        </el-table-column>
        <el-table-column prop="z" label="平均成绩"  align="center">
        </el-table-column>
    
    
        </el-table-column>
      </el-table>
     </div>
     <div class="bottom-block">
      <div class="export-button">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <span>导出Excel</span>
      </div>
      <div class="text">课程名称后加“*”为选修课</div>
    </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
    xq: "2020春",
      xqList: [
        {
          value: "2020春",
          label: "2020春",
        },
        {
          value: "2020夏",
          label: "2020夏",
        },
      ],
      pycc: "一年级",
      pyccList: [
        {
          value: "一年级",
          label: "一年级",
        },
        {
          value: "二年级",
          label: "二年级",
        },
      ],
      xxlx: "大专",
      xxlxList: [
        {
          value: "大专",
          label: "大专",
        },
        {
          value: "本科",
          label: "本科",
        },
      ],
       xl: "选修",
       xlList: [
        {
          value: "选修",
          label: "选修",
        },
        {
          value: "必修",
          label: "必修",
        },
      ],
      db: "一年级",
      dbList: [
        {
          value: "一年级",
          label: "一年级",
        },
        {
          value: "二年级",
          label: "二年级",
        },
      ],
      v1: "",
      tableData: [
        {
         
          date: "209909801",
          xq: "李思思",
          zxddks: "80",
          rctkks: "85",
          zks: "85",
          tkzcs: "85",
          y: 90,
          yProportion: "70",
          l: 71,
          lProportion: "73",
          z: 72,
        },
        {
         
          date: "209909801",
          xq: "李思思",
          zxddks: "80",
          rctkks: "85",
          zks: "85",
          tkzcs: "85",
          y: 90,
          yProportion: "70",
          l: 71,
          lProportion: "73",
          z: 72,
        },
       
      ],
    };
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.assessment-container {
  width: 1875px;
  margin: 0 auto;
  .search-container {
    margin-top: 27px;
    padding-left: 43px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .search-container-left,
    .search-container-right {
      display: flex;
      flex-direction: row;
    }
    .search-container-item {
      color: #004ca7;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      margin-right: 30px;
      > span {
        margin-right: 6px;
      }
    }
    .search-button {
      width: 77px;
      height: 28px;
      line-height: 28px;
      background: #f1f8fe;
      border: 1px solid #51aef6;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      > span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #51aef6;
      }
      > img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }
  }
  .bottom-block {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .export-button {
      width: 127px;
      height: 27px;
      background: #fff6ef;
      border: 1px solid #f3b815;
      border-radius: 4px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-top: 14px;
      > img {
        width: 17px;
        height: 17px;
      }
      > span {
        margin-left: 12px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #f3b815;
      }
    }
    .text {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 39px;
      color: #004ca7;
    }
  }
  .plan-entry-table-container {
    margin-top: 30px;
    .table-data {
      width: 100%;
      border: 0.8px solid #004ca7;
      border-radius: 9px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #004ca7;
    }
  }
  .search-container-center{
    width: 100%;
    height: 64px;
    background: #86aad7;
    opacity: 0.3;
    border-radius: 5px 5px 0px 0px;
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 39px;
    opacity: 1;
    color: #004CA7;
    margin-top: 29px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.table-container {
  margin-top: 30px;
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #80aeee;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
    border-bottom: 1px solid #4f9af1;
    
    height: 46px;

  }
  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/supervision.less";
.wrapper-container {
  width: 1711px;
  margin: 0 auto;
}
.table-container {
  margin-top: 30px;
  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;

  }
}
/deep/ .cell {
  white-space: nowrap;
}
</style>